<template>
    <div v-if="filmInfo" style="padding-bottom:55px;">
        <detailHeader v-top :title="filmInfo.name"></detailHeader>
        <div 
            :style="{backgroundImage:'url('+filmInfo.poster+')'}" 
            style="height:200px;background-size:cover;background-position:center;"
        ></div>
        <h3>{{filmInfo.name}}--{{filmInfo.filmType.name}}</h3>
        <p>{{filmInfo.category}}</p>
        <!-- 使用过滤器过滤时间戳 -->
        <p>{{filmInfo.premiereAt | dataFilter}} 上映</p>
        <p>{{filmInfo.nation}}|{{filmInfo.runtime}}分钟</p>
        <!-- isShow为true显示所有内容，为false只显示一部分 -->
         <div :class="isShow ? '' : 'synopsis'">
            {{filmInfo.synopsis}}
        </div>
        <div style="text-align:center;">
            <i @click="isShow=!isShow" class="iconfont" :class="isShow ? 'icon-jiantoushang' : 'icon-jiantouxia'"></i>
        </div>
        <h3>演职人员</h3>
        <detail-swiper :num="4" :cname="'actor'">
            <div class="swiper-slide" v-for="(actor,index) in filmInfo.actors" :key="index">
                <img :src="actor.avatarAddress" alt="">
                <div style="text-align:center;font-size:12px;">
                    <div>{{actor.name}}</div>
                    <div>{{actor.role}}</div>
                </div>
            </div>
        </detail-swiper>
        <h3>剧照</h3>
        <detail-swiper :num="2" :cname="'photo'">
            <div class="swiper-slide" v-for="(photo,index) in filmInfo.photos" :key="index">
                <div :style="{backgroundImage:'url('+photo+')'}" style="height:100px;background-size:cover;background-position:center;"></div>
            </div>
        </detail-swiper>
    </div>
</template>

<script>
import http from '../utils/http'
import Vue from "vue"
import moment from "moment"

import detailSwiper from '@/views/detail/DetailSwiper.vue'
import detailHeader from "@/views/detail/DetailHeader"

Vue.filter("dataFilter",(premiereAt) => {
    console.log(premiereAt);
    return moment(premiereAt).format("YYYY-MM-DD")
})

Vue.directive("top",{
    inserted(el){
        console.log(el);
        // 默认隐藏
        el.style.display = "none";
        window.onscroll = () => {
            let stop = document.documentElement.scrollTop || document.body.scrollTop;
            if(stop >= 50){
                el.style.display = "block";
            }else{
                el.style.display = "none";
            }
        }
    },
    unbind(){
        window.onscroll = null;
    }
})

export default{
    data() {
        return {
            filmInfo: null,
            isShow:false
        };
    },
    components:{
        detailSwiper,
        detailHeader
    },
    mounted () {
        http({
            url:`/gateway?filmId=${this.$route.params.id}&k=4437593`,
            headers: {
                'X-Host': 'mall.film-ticket.film.info'
            }
        }).then((res)=>{
            console.log(res.data.data.film)
            this.filmInfo=res.data.data.film
        })
    }
}
</script>

<style lang="scss" scoped>
    .synopsis{
        height: 50px;
        overflow: hidden;
    }
</style>